<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>年度出入台账</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <!-- 搜索表单 -->
        <div style="margin: 30px 10px 20px 10px">
            <form class="layui-form layui-form-pane" action="">
                <div class="layui-form-item" style="display: flex; align-items: center; flex-wrap: wrap;">
                    <div class="layui-inline" style="margin-bottom: 0; display: flex; align-items: center; margin-right: 10px;">
                        <label class="layui-form-label" style="width:auto; padding:0 15px; border:none; background:transparent; height:36px; line-height:36px;">计划年份</label>
                        <div class="layui-input-inline" style="width:120px;">
                            <select name="year" class="layui-input">
                                <option value="">全部</option>
                                <option value="2020">2020年</option>
                                <option value="2021">2021年</option>
                                <option value="2022">2022年</option>
                                <option value="2023">2023年</option>
                                <option value="2024">2024年</option>
                                <option value="2025">2025年</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-bottom: 0; display: flex; align-items: center; margin-right: 10px;">
                        <label class="layui-form-label" style="width:auto; padding:0 15px; border:none; background:transparent; height:36px; line-height:36px;">计划类型</label>
                        <div class="layui-input-inline" style="width:140px;">
                            <select name="planType" class="layui-input">
                                <option value="">全部</option>
                                <option value="配变电">配变电</option>
                                <option value="线路">线路</option>
                                <option value="备品">备品</option>
                                <option value="新品">新品</option>
                                <option value="临措">临措</option>
                                <option value="电缆2">电缆2</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-bottom: 0; display: flex; align-items: center; margin-right: 10px;">
                        <label class="layui-form-label" style="width:auto; padding:0 15px; border:none; background:transparent; height:36px; line-height:36px;">物料编号</label>
                        <div class="layui-input-inline" style="width:140px;">
                            <input type="text" name="materialCode" class="layui-input" placeholder="请输入物料编号" style="border-radius:4px;">
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-bottom: 0; display: flex; align-items: center; margin-right: 10px;">
                        <label class="layui-form-label" style="width:auto; padding:0 15px; border:none; background:transparent; height:36px; line-height:36px;">物料名称</label>
                        <div class="layui-input-inline" style="width:140px;">
                            <input type="text" name="materialName" class="layui-input" placeholder="请输入物料名称" style="border-radius:4px;">
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-bottom: 0; display: flex; align-items: center; margin-right: 10px;">
                        <label class="layui-form-label" style="width:auto; padding:0 15px; border:none; background:transparent; height:36px; line-height:36px;">资产编号</label>
                        <div class="layui-input-inline" style="width:140px;">
                            <input type="text" name="assetCode" class="layui-input" placeholder="请输入资产编号" style="border-radius:4px;">
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-bottom: 0; display: flex; align-items: center;">
                        <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="data-search-btn" style="border-radius:4px; margin-right:5px;">
                            <i class="layui-icon">&#xe615;</i>查询
                        </button>
                        <button type="reset" class="layui-btn layui-btn-normal layui-btn-sm" style="border-radius:4px;">
                            <i class="layui-icon">&#xe669;</i>重置
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <!-- 表格容器 -->
        <div style="margin: 0 10px; overflow-x: auto;">
            <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
        </div>
    </div>
</div>

<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'table', 'layer'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            layer = layui.layer;

        // 表格渲染
        table.render({
            elem: '#currentTableId',
            url: '/ledger/annual/queryPage',
            parseData: function (res) {
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "count": res.data.total,
                    "data": res.data.list
                };
            },
            defaultToolbar: ['filter', 'exports', 'print'],
            cols: [
                // 第一行：合并表头
                [
                    { field: 'planType', title: '计划类型', rowspan: 2, width: 120, fixed: 'left' },
                    { field: 'materialCode', title: '物料编号', rowspan: 2, width: 150, fixed: 'left' },
                    { field: 'materialName', title: '物料名称', rowspan: 2, width: 180, fixed: 'left' },

                    { title: '1月', colspan: 3, align: 'center' },
                    { title: '2月', colspan: 3, align: 'center' },
                    { title: '3月', colspan: 3, align: 'center' },
                    { title: '4月', colspan: 3, align: 'center' },
                    { title: '5月', colspan: 3, align: 'center' },
                    { title: '6月', colspan: 3, align: 'center' },
                    { title: '7月', colspan: 3, align: 'center' },
                    { title: '8月', colspan: 3, align: 'center' },
                    { title: '9月', colspan: 3, align: 'center' },
                    { title: '10月', colspan: 3, align: 'center' },
                    { title: '11月', colspan: 3, align: 'center' },
                    { title: '12月', colspan: 3, align: 'center' }
                ],
                // 第二行：子列字段
                [
                    { field: 'month1In', title: '入库', width: 80, align: 'center' },
                    { field: 'month1Out', title: '出库', width: 80, align: 'center' },
                    { field: 'month1Balance', title: '剩余', width: 80, align: 'center' },

                    { field: 'month2In', title: '入库', width: 80, align: 'center' },
                    { field: 'month2Out', title: '出库', width: 80, align: 'center' },
                    { field: 'month2Balance', title: '剩余', width: 80, align: 'center' },

                    { field: 'month3In', title: '入库', width: 80, align: 'center' },
                    { field: 'month3Out', title: '出库', width: 80, align: 'center' },
                    { field: 'month3Balance', title: '剩余', width: 80, align: 'center' },

                    { field: 'month4In', title: '入库', width: 80, align: 'center' },
                    { field: 'month4Out', title: '出库', width: 80, align: 'center' },
                    { field: 'month4Balance', title: '剩余', width: 80, align: 'center' },

                    { field: 'month5In', title: '入库', width: 80, align: 'center' },
                    { field: 'month5Out', title: '出库', width: 80, align: 'center' },
                    { field: 'month5Balance', title: '剩余', width: 80, align: 'center' },

                    { field: 'month6In', title: '入库', width: 80, align: 'center' },
                    { field: 'month6Out', title: '出库', width: 80, align: 'center' },
                    { field: 'month6Balance', title: '剩余', width: 80, align: 'center' },

                    { field: 'month7In', title: '入库', width: 80, align: 'center' },
                    { field: 'month7Out', title: '出库', width: 80, align: 'center' },
                    { field: 'month7Balance', title: '剩余', width: 80, align: 'center' },

                    { field: 'month8In', title: '入库', width: 80, align: 'center' },
                    { field: 'month8Out', title: '出库', width: 80, align: 'center' },
                    { field: 'month8Balance', title: '剩余', width: 80, align: 'center' },

                    { field: 'month9In', title: '入库', width: 80, align: 'center' },
                    { field: 'month9Out', title: '出库', width: 80, align: 'center' },
                    { field: 'month9Balance', title: '剩余', width: 80, align: 'center' },

                    { field: 'month10In', title: '入库', width: 80, align: 'center' },
                    { field: 'month10Out', title: '出库', width: 80, align: 'center' },
                    { field: 'month10Balance', title: '剩余', width: 80, align: 'center' },

                    { field: 'month11In', title: '入库', width: 80, align: 'center' },
                    { field: 'month11Out', title: '出库', width: 80, align: 'center' },
                    { field: 'month11Balance', title: '剩余', width: 80, align: 'center' },

                    { field: 'month12In', title: '入库', width: 80, align: 'center' },
                    { field: 'month12Out', title: '出库', width: 80, align: 'center' },
                    { field: 'month12Balance', title: '剩余', width: 80, align: 'center' }
                ]
            ],
            limits: [10, 20, 50, 100],
            limit: 10,
            page: true,
            skin: 'line'
        });

        // 搜索监听
        form.on('submit(data-search-btn)', function (data) {
            table.reload('currentTableId', {
                page: {curr: 1},
                where: data.field
            }, 'data');
            return false;
        });

        // 重置按钮监听
        form.on('submit(reset)', function () {
            form.val('searchForm', {
                year: '',
                planType: '',
                materialCode: '',
                materialName: '',
                assetCode: ''
            });
            table.reload('currentTableId', {
                page: {curr: 1},
                where: {}
            });
            return false;
        });
    });
</script>
</body>
</html>